<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script src="../node_modules/vue/dist/vue.global.js"></script>
    <!-- 引入axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 使用vant 移动端组件库 -->
    <link rel="stylesheet" href="./vant/index.css">
    <script src="./vant/vant.js"></script>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <!-- <van-button type="primary">主要按钮</van-button> -->
        <!-- 搜索布局 -->
        <div>
            <van-search v-model="value" placeholder="请输入搜索关键词" />
        </div>
        <!-- 轮播图 -->
        <myswiper :swiperarr='swiperArr'></myswiper>

    </div>
</body>

</html>
<script>
    const { createApp } = Vue;
    const vm = createApp({
        data() {
            return {
                count: 0,
                value: '', //搜索的关键字
                swiperArr: [],// 定义轮播图数组
            }
        },
        created() {
            // 发起数据请求
            axios.get('http://kumanxuan1.f3322.net:8001/index/index').then(res => {
                console.log(res);
                // 给轮播图数组赋值
                this.swiperArr = res.data.data.banner
            })
        },
        components: {
            myswiper: {
                template: `<van-swipe class="my-swipe" :autoplay="1000" indicator-color="white">
                                <van-swipe-item v-for="item in swiperarr" :key="item.id">
                                    <van-image width="100%" :src="item.image_url" />
                                </van-swipe-item>
                            </van-swipe>`,
                props: ['swiperarr'],
            }
        }


    });

    // 使用一下vant
    vm.use(vant);
    //挂载根实例到根节点
    vm.mount('#app')

</script>